<script>
import { CloseBold, Check } from "@element-plus/icons-vue";
import { ElDescriptions, ElDescriptionsItem, ElMessage  } from 'element-plus'
export default {
  name: "information-position-dark",
  components: { CloseBold, Check, ElDescriptions, ElDescriptionsItem },
  data() {
    return {
      isCopied: false
    };
  },
  props: {
    mainTitle: {
      type: [String, Number],
      default: ""
    },
    longitude: {
      type: [String, Number],
      default: ''
    },
    latitude: {
      type: [String, Number],
      default: ''
    },
    unid: {
      type: [String, Number],
      default: ''
    },
  },
  computed: {},
  watch: {
    showComponent(nV) { },
  },
  mounted() {
    this.init();
  },
  beforeUnmount() {
  },
  methods: {
    close() {
      this.$emit('close', {
        unid: this.unid
      })
    },
    init() {
    },
    async changeCopiedStatus() {
      try {
        let m = JSON.stringify([this.longitude, this.latitude])
        await navigator.clipboard.writeText(m);
        ElMessage({
          message: '复制成功',
          type: 'success'
        })
      } catch (err) {
        ElMessage({
          message: '无法复制文本',
        })
      }
    }
  },
};
</script>

<template>
  <div class="information-normal">
    <header class="font-alimamashuheiti">
      <span>{{ mainTitle }}</span>
      <div class="funciton-area">
        <div class="icon-area hover-pointer" @click.stop="close">
          <CloseBold />
        </div>
      </div>
    </header>
    <main>
      <div class="item">
        <span class="key">经度</span>
        <span class="value">{{ longitude }}</span>
      </div>
      <div class="item">
        <span class="key">纬度</span>
        <span class="value">{{ latitude }}</span>
      </div>
    </main>
    <div class="popup-tip-container">
      <div class="popup-tip"></div>
    </div>
    <div class="buttom-section" style="text-align: center;">
      <div class="buttom-section-inner cursor-pointer active" @click="changeCopiedStatus">
        <!-- <div class="icon-area">
          <Check />
        </div> -->
        <span>
          复制到剪贴板
        </span>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
@shadow-color: rgba(255, 255, 255, 0.2);

.information-normal {
  position: relative;
  width: 25rem;
  background-color: #000;
  border-radius: .5rem;
  background-color: rgba(36, 49, 63, 1);
  border: 1px solid rgba(34, 181, 255, .9);

  &>header {
    color: #fff;
    padding: .5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url(./images/main-header.svg);

    &>span {
      font-size: 1.4rem;
      cursor: auto !important;
      padding-right: 1rem;
    }

    &>.funciton-area {
      display: inline-flex;

      &>.icon-area {
        width: 2rem;
        height: 2rem;
      }
    }
  }

  &>main {
    cursor: auto !important;
    padding: 1rem;

    &>.item {
      color: #fff;
      line-height: 2;

      & .key {
        font-size: 1.6rem;
        color: #B9DAFF;
      }

      & .value {
        padding-left: 1rem;
        font-size: 1.6rem;
        color: #fff;
      }
    }
  }

  &>.popup-tip-container {
    position: absolute;
    bottom: -2rem;
    left: 50%;
    margin-left: -2rem;
    content: "";
    width: 4rem;
    height: 2rem;
    pointer-events: none;
    overflow: hidden;

    &>.popup-tip {
      width: 2rem;
      height: 2rem;
      border: 1px solid rgba(34, 181, 255, .9);
      background-color: rgba(36, 49, 63, 1);
      margin: -1rem auto 0;
      transform: rotate(45deg);
      box-shadow: 0 0 .5rem @shadow-color;
    }
  }
}

.buttom-section {
  line-height: 3rem;
  position: relative;
  text-align: right;
  color: #fff;

  &>.buttom-section-inner {
    display: inline-block;
    padding: 0 1rem;
    font-size: 1.2rem;
    text-align: center;
    display: inline-flex;
    align-items: center;
    // border: 1px solid red;

    &>.icon-area {
      width: 2rem;
      height: 2rem;
    }

    // &.active>img {
    //   margin-right: 1rem;
    //   animation: shine 1s infinite;
    // }

    &:hover {
      color: rgb(46, 212, 68);
    }
  }
}
</style>
